<template>
	<view class="page">
		<u-swiper indicatorStyle="bottom: 50rpx;" :list="info.imgs" height="450rpx" indicator indicatorMode="line" circular />
		<view class="line"></view>
		<view class="content">
			<view class="box">
				<view class="title"><text class="tag">{{ info.cate_name }}</text>{{ info.name }}</view>
				<!-- <view class="item">
					<view class="name">人数：</view>
					<view class="count">{{ info.people }}/{{ info.limit }}</view>
				</view>
				<view class="item">
					<view class="name">时间：</view>
					<view class="count">{{ info.start_time }}</view>
				</view>
				<view class="item">
					<view class="name">地址：</view>
					<view class="address">{{ info.address }}</view>
				</view> -->
				<u-divider text="报名信息" :hairline="true"></u-divider>
				<view class="item">
					<view class="name">头像：</view>
					<u-avatar :src="$imgUrls(info.myinfo.v_headimg)" size="60rpx"></u-avatar>
				</view>
				<view class="item">
					<view class="name">姓名：</view>
					<view class="count">{{ info.myinfo.v_name || '-' }}</view>
				</view>
				<view class="item">
					<view class="name">电话：</view>
					<view class="count">{{ info.myinfo.v_tel || '-' }}</view>
				</view>
				<view v-if="info.sign_find.state == 1" class="join-btn" @click="onReport">确认核销</view>
				<view v-else-if="info.sign_find.state == 5" class="join-btn" style="filter: grayscale(1);opacity: 0.6;">已核销</view>
				<template v-else>
					<u-button v-if="info.state == 5" text="活动已满员" shape="circle" style="width: 400rpx;margin: 50rpx auto;"></u-button>
					<u-button v-else-if="info.state == 3" text="报名已结束" shape="circle" style="width: 400rpx;margin: 50rpx auto;"></u-button>
					<u-button v-else-if="info.state == 4" text="活动已取消" shape="circle" style="width: 400rpx;margin: 50rpx auto;"></u-button>
				</template>
			</view>
			<!-- <view class="box">
				<u-divider text="已报名"></u-divider>
				<view class="avatar-list" v-if="info.members && info.members.length">
					<u-avatar class="avatar" :src="$imgUrls(menber.v_headimg)" v-for="(menber, m) in info.members" :key="m" size="62rpx"></u-avatar>
				</view>
				<view style="padding-bottom: 30rpx;" v-else>暂无</view>
			</view>
			<view class="box">
				<u-divider text="活动介绍"></u-divider>
				<view ></view>
				<u-parse class="rich-text" :content="info.desc"></u-parse>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: '',
			sign_id: ''
		};
	},
	onLoad(e) {
		if (e.sign_id) {
			this.sign_id = e.sign_id
			this.getDetail(e.sign_id)
		}
	},
	methods: {
		getDetail(id) {
			this.$http.get({
				url: '/singleSaleEventApi/getEventDetail',
				data: { 
					sign_id: id,
					bid: 'hGwDuBLqQEftUp9qTFQyeQ=='
				}
			}).then(({ data }) => {
				data.imgs = data.imgs.map(i => this.$imgUrls(i))
				this.info = data
			})
		},
		onReport() { 
			this.$http.post({
				url: '/singleSaleEventApi/checkSignQr',
				data: { 
					id: this.sign_id,
					bid: 'hGwDuBLqQEftUp9qTFQyeQ=='
				}
			}).then(() => {
				this.getDetail(this.sign_id)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page{
	background: #f8f8f8;
	.line{
		border-radius: 40rpx 40rpx 0 0;
		height: 40rpx;
		margin-top: -38rpx;
		background: #f8f8f8;
		position: relative;
		z-index: 1;
	}
	.banner{
		height: 380rpx;
	}
	.content{
		padding: 24rpx;
		padding-top: 0;
		.box{
			background: white;
			box-shadow: 0 0 12rpx 4rpx rgba(0,0,0,0.05);
			border-radius: 8rpx;
			padding: 20rpx;
			margin-bottom: 24rpx;
			.rich-text{
				padding: 10rpx 0 30rpx;
			}
			.tag{
				background: #ff6600;
				border-radius: 8rpx 0 8rpx 0;
				color: white;
				position: relative;
				top: -4rpx;
				padding: 0 8rpx;
				display: inline-block;
				margin-right: 10rpx;
			}
			.join-btn{
				line-height: 78rpx;
				background: #ff6600;
				box-shadow: 0 0 12rpx 4rpx #ff66003d;
				text-align: center;
				color: white;
				text-align: center;
				border-radius: 90rpx;
				width: 400rpx;
				margin: 50rpx auto;
				font-size: 30rpx;
				font-weight: bold;
			}
			.title{
				font-size: 32rpx;
				text-align: justify;
				font-weight: bold;
				margin-bottom: 12rpx;
			}
			.item{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				padding: 12rpx 0;
				.name{
					color: #999;
				}
				.count{
					color: #333;
				}
				.address{
					flex: 1;
					color: #333;
					display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				}
				.km{
					color: #222;
				}
			}
			.code-box{
				margin-top: 20rpx;
				background: white;
				box-shadow: 0 0 12rpx 4rpx rgba(0,0,0,0.05);
				border-radius: 12rpx;
				padding: 24rpx;
				text-align: center;
				.code-img{
					width: 100%;
					height: 654rpx;
				}
				.code{
					font-weight: bold;
					font-size: 28rpx;
					margin-top: 15px;
				}
			}
			.avatar-list{
				display: flex;
				flex-wrap: wrap;
				margin-right: -14rpx;
				.avatar{
					margin-right: 14rpx;
					margin-bottom: 14rpx;
				}
			}
		}
	}
	
}
</style>

